<!doctype html>
<html class="export">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Cascading grid layout library">

  <title>Masonry &#xB7; Methods</title>

    <link rel="stylesheet" href="css/masonry-docs.css" media="screen">

</head>
<body class="page--methods" data-page="methods">

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>


  <div id="content" class="content container">

      <h1>Methods</h1>

    <ul class="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#layout">Layout</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layout-masonry">layout / .masonry()</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layoutitems">layoutItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#stamp">stamp</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#unstamp">unstamp</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#adding-removing-items">Adding &amp; removing items</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#appended">appended</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#prepended">prepended</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#additems">addItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#remove">remove</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#events">Events</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#on">on</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#off">off</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#once">once</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#utilities">Utilities</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#reloaditems">reloadItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#destroy">destroy</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#getitemelements">getItemElements</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#jquery-fn-data-masonry">jQuery.fn.data(&apos;masonry&apos;)</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#masonry-data">Masonry.data</a></li>
</ul>


<p>Methods are actions done by Masonry instances.</p>

<p>With jQuery, methods follow the jQuery UI pattern <code>.masonry( <span class="string">&apos;methodName&apos;</span> <span class="comment">/* arguments */</span> )</code>.</p>

<pre><code class="js"><span class="jquery_var">$grid</span>.masonry()
  .append( elem )
  .masonry( <span class="string">&apos;appended&apos;</span>, elem )
  <span class="comment">// layout</span>
  .masonry();
</code></pre>

<div class="call-out">
  <p>jQuery chaining is broken by methods that return values: (i.e. 
    <a href="#getitemelements"><code>getItemElements</code></a>,
    <a href="#getitem"><code>getItem</code></a>,
    <a href="#on"><code>on</code></a>, and
    <a href="#off"><code>off</code></a>).</p>
</div>


<pre><code class="js"><span class="keyword">var</span> container = <span class="built_in">document</span>.querySelector(<span class="string">&apos;#container&apos;</span>);
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( container );
container.appendChild( elem );
<span class="masonry_var">msnry</span>.appended( elem );
<span class="masonry_var">msnry</span>.layout();
</code></pre>

<p>Vanilla JavaScript methods look like <code>masonry.methodName( <span class="comment">/* arguments */</span> )</code>. Unlike jQuery methods, they cannot be chained together.</p>

<pre><code class="js"><span class="comment">// vanilla JS</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {...});
gridElement.appendChild( elem );
<span class="masonry_var">msnry</span>.appended( elem );
<span class="masonry_var">msnry</span>.layout();
</code></pre>


<h2 id="layout">Layout</h2>


<h3 id="layout-masonry">layout / .masonry()</h3>

<p>Lays out all item elements. <code>layout</code> is useful when an item has changed size, and all items need to be laid out again.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry()
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.layout()
</code></pre>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).masonry({
  columnWidth: <span class="number">80</span>
});
<span class="comment">// change size of item by toggling gigante class</span>
<span class="jquery_var">$grid</span>.on( <span class="string">&apos;click&apos;</span>, <span class="string">&apos;.grid-item&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  $(<span class="keyword">this</span>).toggleClass(<span class="string">&apos;gigante&apos;</span>);
  <span class="comment">// trigger layout after item size changes</span>
  <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;layout&apos;</span>);
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="layout-demo">
    <p class="instruction">Click item to toggle size</p>
  
    <div class="grid grid--clickable">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
  
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/JdEyYQ">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/vdkJn">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>


<h3 id="layoutitems">layoutItems</h3>

<p>Lays out specified items.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;layoutItems&apos;</span>, items, isStill )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.layoutItems( items, isStill )
</code></pre>

<p class="variable">
  <code class="variable__code">items</code>
  <span class="variable__type"><i>Array</i> of <i>Masonry.Item</i>s</span>
</p>

<p class="variable">
  <code class="variable__code">isStill</code>
  <span class="variable__type"><i>Boolean</i></span>
  <span class="variable__description">Disables transitions</span>
</p>


<h3 id="stamp">stamp</h3>

<p>Stamps elements in the layout. Masonry will lay out item elements <em>around</em> stamped elements.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;stamp&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.stamp( elements )
</code></pre>

<p class="variable">
  <code class="variable__code">elements</code>
  <span class="variable__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>

<p>Set <a href="options.html#itemselector"><code>itemSelector</code></a> so that stamps do not get used as layout items.</p>

<p>Stamp the elements in the layout. Masonry will lay out item elements <em>around</em> stamped elements.</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).masonry({
  <span class="comment">// specify itemSelector so stamps do get laid out</span>
  itemSelector: <span class="string">&apos;.grid-item&apos;</span>,
  columnWidth: <span class="number">80</span>
});
<span class="keyword">var</span> $stamp = <span class="jquery_var">$grid</span>.find(<span class="string">&apos;.stamp&apos;</span>);
<span class="keyword">var</span> isStamped = <span class="literal">false</span>;

$(<span class="string">&apos;.stamp-button&apos;</span>).on( <span class="string">&apos;click&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="comment">// stamp or unstamp element</span>
  <span class="keyword">if</span> ( isStamped ) {
    <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;unstamp&apos;</span>, $stamp );
  } <span class="keyword">else</span> {
    <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;stamp&apos;</span>, $stamp );
  }
  <span class="comment">// trigger layout</span>
  <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;layout&apos;</span>);
  <span class="comment">// set flag</span>
  isStamped = !isStamped;
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="stamp-methods-demo">
    <button class="button stamp-button">Toggle stamped</button>
    <div class="grid grid--has-stamp grid--stamp-methods-demo">
      <div class="stamp stamp--stamp-methods-demo"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/MwJvbq">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/wKpjs">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>


<h3 id="unstamp">unstamp</h3>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;unstamp&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.unstamp( elements )
</code></pre>

<p>Un-stamps elements in the layout, so that Masonry will no longer layout item elements around them. <a href="#stamp">See demo above</a>.</p>

<p class="variable">
  <code class="variable__code">elements</code>
  <span class="variable__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>


<h2 id="adding-removing-items">Adding &amp; removing items</h2>


<h3 id="appended">appended</h3>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;appended&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.appended( elements )
</code></pre>

<p>Adds and lays out newly appended item elements to the end of the layout.</p>

<p class="variable">
  <code class="variable__code">elements</code>
  <span class="variable__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js">$(<span class="string">&apos;.append-button&apos;</span>).on( <span class="string">&apos;click&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="comment">// create new item elements</span>
  <span class="keyword">var</span> $items = $(<span class="string">&apos;&lt;div class=&quot;grid-item&quot;&gt;...&lt;/div&gt;&apos;</span>);
  <span class="comment">// append items to grid</span>
  <span class="jquery_var">$grid</span>.append( $items )
    <span class="comment">// add and lay out newly appended items</span>
    .masonry( <span class="string">&apos;appended&apos;</span>, $items );
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="appended-demo">
    <button class="button append-button">Append items</button>
    <div class="grid">
      <div class="grid-item grid-item--width3"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/kwALv">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/nhekz">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>


<h3 id="prepended">prepended</h3>

<p>Adds and lays out newly prepended item elements at the beginning of layout.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="masonry_var">msnry</span>.prepended( elements )
<span class="comment">// vanilla JS</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;prepended&apos;</span>, elements )
</code></pre>

<p class="variable">
  <code class="variable__code">elements</code>
  <span class="variable__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js">$(<span class="string">&apos;.prepend-button&apos;</span>).on( <span class="string">&apos;click&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="comment">// create new item elements</span>
  <span class="keyword">var</span> $items = $(<span class="string">&apos;&lt;div class=&quot;grid-item&quot;&gt;...&lt;/div&gt;&apos;</span>);
  <span class="comment">// prepend items to grid</span>
  <span class="jquery_var">$grid</span>.prepend( $items )
    <span class="comment">// add and lay out newly prepended items</span>
    .masonry( <span class="string">&apos;prepended&apos;</span>, $items );
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="prepended-demo">
    <button class="button prepend-button">Prepend items</button>
    <div class="grid">
      <div class="grid-item grid-item--width3"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/rVjgrL">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/vilFn">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>


<h3 id="additems">addItems</h3>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;addItems&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.addItems( elements )
</code></pre>

<p>Adds item elements to the Masonry instance. <code>addItems</code> does not lay out items like <a href="#appended"><code>appended</code></a>, <a href="#prepended"><code>prepended</code></a>, or <a href="#insert"><code>insert</code></a>.</p>

<p class="variable">
  <code class="variable__code">elements</code>
  <span class="variable__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>


<h3 id="remove">remove</h3>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;remove&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.remove( elements )
</code></pre>

<p>Removes elements from the Masonry instance and DOM.</p>

<p class="variable">
  <code class="variable__code">elements</code>
  <span class="variable__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="jquery_var">$grid</span>.on( <span class="string">&apos;click&apos;</span>, <span class="string">&apos;.grid-item&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="comment">// remove clicked element</span>
  <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;remove&apos;</span>, <span class="keyword">this</span> )
    <span class="comment">// layout remaining item elements</span>
    .masonry(<span class="string">&apos;layout&apos;</span>);
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="remove-demo">
    <p class="instruction">Click items to remove</p>
    <div class="grid grid--clickable">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/aOprQW">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/IBJeq">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>


<h2 id="events">Events</h2>


<h3 id="on">on</h3>

<p>Adds a <a href="events.html">Masonry event</a> listener.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;on&apos;</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.on( eventName, listener )
</code></pre>

<p class="variable">
  <code class="variable__code">eventName</code>
  <span class="variable__type"><i>String</i></span>
  <span class="variable__description">Name of a <a href="events.html">Masonry event</a></span>
</p>

<p class="variable">
  <code class="variable__code">listener</code>
  <span class="variable__type"><i>Function</i></span>
</p>


<h3 id="off">off</h3>

<p>Removes a <a href="events.html">Masonry event</a> listener.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;off&apos;</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.off( eventName, listener )
</code></pre>

<p class="variable">
  <code class="variable__code">eventName</code>
  <span class="variable__type"><i>String</i></span>
  <span class="variable__description">Name of a <a href="events.html">Masonry event</a></span>
</p>

<p class="variable">
  <code class="variable__code">listener</code>
  <span class="variable__type"><i>Function</i></span>
</p>


<h3 id="once">once</h3>

<p>Adds a <a href="events.html">Masonry event</a> listener to be triggered just once.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;once&apos;</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.once( eventName, listener )
</code></pre>

<p class="variable">
  <code class="variable__code">eventName</code>
  <span class="variable__type"><i>String</i></span>
  <span class="variable__description">Name of a <a href="events.html">Masonry event</a></span>
</p>

<p class="variable">
  <code class="variable__code">listener</code>
  <span class="variable__type"><i>Function</i></span>
</p>

<pre><code class="js"><span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;once&apos;</span>, <span class="string">&apos;arrangeComplete&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="built_in">console</span>.log(<span class="string">&apos;arrange is complete, just once&apos;</span>)
})
</code></pre>


<h2 id="utilities">Utilities</h2>


<h3 id="reloaditems">reloadItems</h3>

<p>Recollects all item elements.</p>

<p>For frameworks like Angular and React, <code>reloadItems</code> may be useful to apply changes to the DOM to Masonry.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;reloadItems&apos;</span>)
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.reloadItems()
</code></pre>


<h3 id="destroy">destroy</h3>

<p>Removes the Masonry functionality completely. <code>destroy</code> will return the element back to its pre-initialized state.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;destroy&apos;</span>)
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.destroy()
</code></pre>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> masonryOptions = {
  itemSelector: <span class="string">&apos;.grid-item&apos;</span>,
  columnWidth: <span class="number">80</span>
};
<span class="comment">// initialize Masonry</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).masonry( masonryOptions );
<span class="keyword">var</span> isActive = <span class="literal">true</span>;

$(<span class="string">&apos;.toggle-button&apos;</span>).on( <span class="string">&apos;click&apos;</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="keyword">if</span> ( isActive ) {
    <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;destroy&apos;</span>); <span class="comment">// destroy</span>
  } <span class="keyword">else</span> {
    <span class="jquery_var">$grid</span>.masonry( masonryOptions ); <span class="comment">// re-initialize</span>
  }
  <span class="comment">// set flag</span>
  isActive = !isActive;
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js-module="destroy-demo">
    <button class="button toggle-button">Toggle Masonry</button>
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/jPyoRE">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/EogCw">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>


<h3 id="getitemelements">getItemElements</h3>

<p>Returns an array of item elements.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> elems = <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;getItemElements&apos;</span>)
<span class="comment">// vanilla JS</span>
<span class="keyword">var</span> elems = <span class="masonry_var">msnry</span>.getItemElements()
</code></pre>

<p class="variable">
  <code class="variable__code">elems</code>
  <span class="variable__type"><i>Array</i> of <i>Element</i>s</span>
</p>


<h3 id="jquery-fn-data-masonry">jQuery.fn.data(&apos;masonry&apos;)</h3>

<p>Get the Masonry instance from a jQuery object. Masonry instances are useful to access Masonry properties.</p>

<pre><code class="js"><span class="keyword">var</span> <span class="masonry_var">msnry</span> = $(<span class="string">&apos;.grid&apos;</span>).data(<span class="string">&apos;masonry&apos;</span>)
<span class="comment">// access Masonry properties</span>
<span class="built_in">console</span>.log( <span class="masonry_var">msnry</span>.filteredItems.length + <span class="string">&apos; filtered items&apos;</span>  )
</code></pre>


<h3 id="masonry-data">Masonry.data</h3>

<p>Get the Masonry instance via its element. <code>Masonry.data()</code> is useful for getting the Masonry instance in JavaScript, after it has been initalized in HTML.</p>

<pre><code class="js"><span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="masonry_keyword">Masonry</span>.data( element )
</code></pre>

<p class="variable">
  <code class="variable__code">element</code>
  <span class="variable__type"><i>Element</i> or Selector <i>String</i></span>
</p>

<p class="variable">
  <code class="variable__code">msnry</code>
  <span class="variable__type"><i>Masonry</i></span>
</p>

<pre><code class="html"><span class="comment">&lt;!-- init Masonry in HTML --&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid js-masonry&quot;</span> <span class="attribute">data-masonry-options</span>=<span class="value">&apos;{...}&apos;</span>&gt;</span>...<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</code></pre>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="comment">// pass in the element, $element[0], not the jQuery object</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="masonry_keyword">Masonry</span>.data( $(<span class="string">&apos;.grid&apos;</span>)[<span class="number">0</span>] )

<span class="comment">// vanilla JS</span>
<span class="comment">// using an element</span>
<span class="keyword">var</span> grid = <span class="built_in">document</span>.querySelector(<span class="string">&apos;.grid&apos;</span>)
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="masonry_keyword">Masonry</span>.data( grid )
<span class="comment">// using a selector string</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="masonry_keyword">Masonry</span>.data(<span class="string">&apos;.grid&apos;</span>)
</code></pre>


  </div>

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  <div class="site-footer">
  
    <div class="container">
        <p class="site-footer__copy">
          Masonry is made by <a href="http://desandro.com">David DeSandro</a>.
          Make something rad with it.
        </p>
  
  
      <p class="site-footer__copy">Help improve these docs.
        <a href="https://github.com/desandro/masonry-docs/issues/">Open an issue</a> or
        <a href="https://github.com/desandro/masonry-docs/blob/master/content/methods.mustache">pull request</a>.</p>
  
    </div>
  
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')</script>

  <script src="js/masonry-docs.min.js"></script>


</body>
</html>
